<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>用户点赞</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<div id="app">
	<like-component></like-component>
</div>

<!-- 将点赞的组件模板写到html中 -->
<template id="like-tpl">
	<button @click="setLike" :style="isLiked ? {backgroundColor:'yellow'} : ''">{{text}} +{{likeCount}}</button>
</template>
</body>
<script>
const app = Vue.createApp({
	
	components: {
		'like-component': {
			data:function(){
				return {
					text: '点赞',
					likeCount: 200,
					//设置当前的点赞状态，false表示初始状态，还没有点赞
					isLiked:false
				}
			},
			template: `#like-tpl`,
			
			//组件的事件方法
			methods: {
				setLike: function(){
					//判断用户是否已经点赞了
					if(this.isLiked){
						this.likeCount--;
						this.text = '取消了点赞';
					}else{
						this.likeCount++;
						this.text = '已点赞';
					}
					//将点赞状态还原
					this.isLiked = !this.isLiked;
				}
			}
		}
		
	}
});

let vm1 = app.mount('#app');
// console.log(vm1);
</script>
</html>